<template>
  <view class="bank">
    <view class="list">
      <view class="item" v-for="(item, index) in list" :class="item.class">
        <view class="sign" v-if="currentActive == index"> 收款卡 </view>
        <view class="sign" v-else @click="handleSetNormalCard(index)">
          设为默认
        </view>
        <view class="edit" @click="handleEditCard(index)">修改 </view>
        <view class="delete" @click="handleDeleteCard(index)">
          <image class="delete-img" src="../../static/my/bank-delete.png" />
        </view>
        <view class="bank-info">
          <view class="bank-avatar">
            <image :src="item.icon" />
          </view>
          <view class="bank-info-top">
            <view class="bank-name">{{ item.bankShortName }}</view>
            <view class="bank-num">{{ item.bankCardNo }}</view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="add-btn"
      :class="{ small: list.length }"
      @click="handleAddBank"
    >
      <view class="add-btn-text">+</view>
      <view class="add-btn-desc">添加本人名下银行卡</view>
    </view>
    <AlertModal
      :showModal="showModal"
      :confirmText="modalOptions.confirmText"
      :showFooter="modalOptions.showFooter"
      :showCancel="modalOptions.showCancel"
      :desc="modalOptions.desc"
      :mode="modalOptions.mode"
      :showPwd="showPwd"
      @cancel="handleModalCancel"
      @confirm="handleModalConfirm"
      @hide="handleHide"
    >
      <ValidCode
        v-if="showPwd"
        ref="code"
        :maxlength="6"
        :isPwd="true"
        @finish="getCode"
      />
    </AlertModal>
  </view>
</template>
<script>
import AlertModal from './Modal.vue'
import ValidCode from './validCode.vue'
import certificateTip from '../../components/C_tipModal/certificateTip.vue'
export default {
  components: {
    AlertModal,
    ValidCode,
    certificateTip,
  },
  data() {
    return {
      showPwd: false,
      pwdValue: [
        { value: '', focus: false },
        { value: '', focus: false },
        { value: '', focus: false },
        { value: '', focus: false },
        { value: '', focus: false },
        { value: '', focus: false },
      ],
      modalOptions: {
        showFooter: true,
        showCancel: true,
        desc: '',
        mode: '1',
        showFooter: true,
        confirmText: '',
      },
      list: [],
      currentActive: 0,
      showModal: false,
      pwdActive: 0,
      cardActive: 0,
      pageSize: 10,
      pageNum: 1,
      userInfo: {},
      bankList: [
        {
          name: '中国工商银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon1.png',
          style: {
            background: '#c92b05',
          },
          class: 'bac92b05',
        },
        {
          name: '中国光大银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon2.png',
          style: {
            background: '#661582',
          },
          class: 'ba661582',
        },
        {
          name: '中国建设银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon3.png',
          style: {
            background: '#0266b3',
          },
          class: 'ba0266b3',
        },
        {
          name: '交通银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon4.png',
          style: {
            background: '#1d2088',
          },
          class: 'ba1d2088',
        },

        {
          name: '中国农业银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon5.png',
          style: {
            background: '#319c8b',
          },
          class: 'ba319c8b',
        },
        {
          name: '中国人民银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon6.png',
          style: {
            background: '#cf281e',
          },
          class: 'bacf281e',
        },
        {
          name: '兴业银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon7.png',
          style: {
            background: '#004186',
          },
          class: 'ba004186',
        },
        {
          name: '中国邮政储蓄银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon8.png',
          style: {
            background: '#007130',
          },
          class: 'ba007130',
        },
        {
          name: '招商银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon9.png',
          style: {
            background: '#e60012',
          },
          class: 'bae60012',
        },
        {
          name: '中国银行',
          icon: 'https://minio.wskjwl.com/qrcode/bank/bank-icon10.png',
          style: {
            background: '#c91520',
          },
          class: 'bac91520',
        },
      ],
      checkType: 1,
    }
  },
  onShow() {
    this.getuserInfo()
    this.getList()
  },
  methods: {
    async getuserInfo() {
      const res = await this.$u.get('/freight-business/get/userInfo')
      if (res.code === '0') {
        uni.setStorageSync('userInfo', res.result)
        this.userInfo = res.result
      } else {
        this.$api.msg(res.message)
      }
    },
    async getList() {
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightUserBank/page',
        { pageSize: this.pageSize, pageNum: this.pageNum }
      )
      if (code === '0') {
        this.list = result.records.map((item, index) => {
          if (item.defaultFlag == 1) {
            this.currentActive = index
          }
          let reg = /^(\d{4})\d+(\d{4})$/
          return {
            ...item,
            bankCardNo: item.bankCardNo.replace(reg, '**** **** **** $2'),
            bankShortName: item.bankShortName,
            class: this.bankList.filter(
              (val) => val.name === item.bankShortName
            )[0]
              ? this.bankList.filter(
                  (val) => val.name === item.bankShortName
                )[0].class
              : 'bac92b05',
            icon: this.bankList.filter(
              (val) => val.name === item.bankShortName
            )[0]
              ? this.bankList.filter(
                  (val) => val.name === item.bankShortName
                )[0].icon
              : '',
          }
        })
      }
    },
    handleHide() {
      this.showPwd = false
      this.showModal = false
    },
    async getCode(e) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/userAccount/checkOperatePassword',
        { operatePassword: e, accountId: this.userInfo.accountId }
      )
      if (code === '0') {
        this.showPwd = false
        this.showModal = false
        if (this.checkType == 1) {
          uni.navigateTo({
            url: '/pages/bank/add',
          })
        } else if (this.checkType == 2) {
          this.modalDelete()
        } else {
          this.bankId = this.list[this.cardActive].bankId
          uni.navigateTo({
            url: '/pages/bank/edit?bankId=' + this.bankId,
          })
        }
      } else {
        this.$refs.code.clear()
        this.$api.msg(message)
      }
    },
    async handleSetNormalCard(index) {
      console.log(index)
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightUserBank/default',
        { bankId: this.list[index].bankId }
      )
      console.log(this.list)
      if (code === '0') {
        this.$api.msg('设置成功')
        this.getList()
      } else {
        this.$api.msg(message)
      }
    },
    handleEditCard(index) {
      if (this.userInfo.operatePwdFlag == '0') {
        this.modalSetPwd()
      } else {
        this.cardActive = index
        this.checkType = 3
        this.modalCheckPwd()
      }
    },
    handleDeleteCard(index) {
      if (this.userInfo.operatePwdFlag == '0') {
        this.modalSetPwd()
      } else {
        this.cardActive = index
        this.checkType = 2
        this.modalCheckPwd()
      }
    },
    handleAddBank() {
      if (this.userInfo.operatePwdFlag == '0') {
        this.modalSetPwd()
      } else {
        this.checkType = 1
        this.modalCheckPwd()
      }
    },
    modalSetPwd() {
      this.modalOptions.confirmText = '去设置'
      this.modalOptions.desc = '您还没有设置账户密码，请先进行设置'
      this.showModal = true
      this.modalOptions.showFooter = true
    },
    modalCheckPwd() {
      this.modalOptions.showFooter = false
      this.showPwd = true
      this.modalOptions.desc = '请输入账号密码，已确认身份'
      this.showModal = true
    },
    modalDelete() {
      const val = this.list[this.cardActive].bankCardNo.substring(
        this.list[this.cardActive].bankCardNo.length - 4,
        this.list[this.cardActive].bankCardNo.length
      )
      this.modalOptions.confirmText = '删除'
      this.modalOptions.desc = `您要对尾号${val}的银行卡进行删除吗？`
      this.modalOptions.mode = '2'
      this.showModal = true
      this.modalOptions.showFooter = true
    },
    handleModalCancel() {
      this.showPwd = false
      this.showModal = false
    },
    async handleModalConfirm() {
      if (this.modalOptions.confirmText == '去设置') {
        uni.navigateTo({
          url: '/pages/bank/pwd',
        })
      } else if (this.modalOptions.confirmText == '删除') {
        const { code, result, message } = await this.$u.post(
          '/freight-business/freightUserBank/delete',
          { bankId: this.list[this.cardActive].bankId }
        )
        if (code === '0') {
          this.$api.msg('删除成功')
          this.getList()
        } else {
          this.$api.msg(message)
        }
      }
      this.showPwd = false
      this.showModal = false
    },
  },
}
</script>
<style lang="scss" scoped>
.bank {
  min-height: 100vh;
  background: #f6f6f6;
  padding: 30rpx;
  box-sizing: border-box;
}
.add-btn {
  height: 200rpx;
  background: #ffffff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  &.small {
    flex-direction: row;
    width: 690rpx;
    height: 104rpx;
    background: #ffffff;
    border-radius: 10rpx;
    justify-content: flex-start;
    .add-btn-text {
      margin-left: 17rpx;
      margin-right: 24rpx;
    }
    .add-btn-desc {
      margin-top: 0;
    }
  }
  &-text {
    width: 32rpx;
    height: 32rpx;
    background: #000000;
    text-align: center;
    line-height: 32rpx;
    color: #fff;
    font-weight: 600;
    border-radius: 50%;
    font-size: 32rpx;
  }
  &-desc {
    font-size: 34rpx;
    color: #333333;
    line-height: 48rpx;
    margin-top: 10rpx;
  }
}
.item {
  position: relative;
  width: 690rpx;
  height: 220rpx;
  // background: #91468c;
  border-radius: 10rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
}
.bac92b05 {
  background: #c92b05;
}
.ba661582 {
  background: #661582;
}
.ba0266b3 {
  background: #0266b3;
}
.ba1d2088 {
  background: #1d2088;
}
.ba319c8b {
  background: #319c8b;
}
.bacf281e {
  background: #cf281e;
}
.ba004186 {
  background: #004186;
}
.ba007130 {
  background: #007130;
}
.bae60012 {
  background: #e60012;
}
.bac91520 {
  background: #c91520;
}
.sign {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 104rpx;
  height: 34rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8rpx;
  text-align: center;
  line-height: 34rpx;
  font-size: 24rpx;
  color: #ffffff;
}
.edit {
  position: absolute;
  right: 80rpx;
  bottom: -10rpx;
  width: 60rpx;
  height: 60rpx;
  color: white;
  &-img {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    width: 24rpx;
    height: 24rpx;
  }
}
.delete {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60rpx;
  height: 60rpx;
  &-img {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    width: 24rpx;
    height: 24rpx;
  }
}
.bank-info {
  margin-left: 28rpx;
  margin-top: 35rpx;
  display: flex;
}
.bank-avatar {
  width: 58rpx;
  height: 58rpx;
  background: #ffffff;
  margin-right: 16rpx;
  border-radius: 50%;
  image {
    width: 100%;
    height: 100%;
  }
}
.bank-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 45rpx;
  margin-bottom: 60rpx;
}
.bank-num {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 45rpx;
}
.modal-pwd {
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
}
</style>
